<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>查询商品</title>
    <style>
      /* 搜索区域 */
      .search-box > .price-search,
      .search-box > .name-search {
        width: 540px;
        margin: 30px auto;
      }

      table {
        width: 500px;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        border-collapse: collapse;
      }

      thead > tr {
        height: 30px;
        background-color: #caccca;
      }

      tbody > tr {
        height: 30px;
      }

      /* 清除自带样式 */
      input {
        outline: none;
      }

      button {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 搜索区域 -->
    <div class="search-box">
      <div class="price-search">
        按照价格查询：
        <input type="text" class="priec-start" /> -
        <input type="text" class="priec-end" />
        <button id="searchBtn">查询</button>
      </div>
      <div class="name-search">
        按照商品名称查询：
        <input type="text" class="name-search-input" />
        <button id="searchBtn2">查询</button>
      </div>
    </div>

    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>商品名称</th>
          <th>价格</th>
        </tr>
      </thead>

      <tbody></tbody>
    </table>

    <script>
      // 表格数据
      var datas = [
        {
          id: 1,
          name: '小米',
          price: 3999
        },
        {
          id: 2,
          name: 'oppo',
          price: 999
        },
        {
          id: 3,
          name: '荣耀',
          price: 1299
        },
        {
          id: 4,
          name: '华为',
          price: 1999
        }
      ];

      // 获取相应元素
      var tbody = document.querySelector('tbody');
      var searchBtn = document.querySelector('#searchBtn');
      var priecStart = document.querySelector('.priec-start');
      var priecEnd = document.querySelector('.priec-end');
      var searchBtn2 = document.querySelector('#searchBtn2');
      var nameSearchInput = document.querySelector('.name-search-input');

      // 动态渲染表格数据
      function setData(data) {
        // 先清空数据
        tbody.innerHTML = '';
        data.forEach(function (item) {
          var tr = document.createElement('tr');
          tr.innerHTML = '<td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.price + '</td>';
          tbody.appendChild(tr);
        });
      }
      setData(datas);

      searchBtn.addEventListener('click', function () {
        var newArr = datas.filter(function (item) {
          return item.price >= priecStart.value && item.price <= priecEnd.value;
        });
        setData(newArr);
      });

      searchBtn2.addEventListener('click', function () {
        var nameArr = [];
        datas.some(function (item) {
          if (item.name === nameSearchInput.value) {
            nameArr.push(item);
            return true;
          }
        });
        setData(nameArr);
      });
    </script>
  </body>
</html>
